<template>
  <Card title="续租信息" style="padding-bottom: 2px">
    <DescriptionsItem
      label="续租开始时间"
      :labelColon="false"
      style="padding: 10px 0"
    >
      <view class="time-date">
        <view>{{ queryPriceParam.carUseTime | dateFilter }}</view>
      </view>
    </DescriptionsItem>
    <u-line></u-line>
    <DescriptionsItem
      label="续租结束时间"
      :labelColon="false"
      style="padding: 10px 0"
    >
      <view class="time-date" @click="selectRenewedTime">
        <view class="placeholder-text">
          <template v-if="queryPriceParam.carReturnTime">
            <span style="color: #356DEE">{{ queryPriceParam.carReturnTime | dateFilter }}</span>
            <u-icon name="arrow-right" color="#7f7c7c" size="24"></u-icon>
          </template>
          <template v-else>
            <span style="color: #356DEE">请选择</span>
            <u-icon name="arrow-right" color="#7f7c7c" size="24"></u-icon>
          </template>
        </view>
      </view>
    </DescriptionsItem>
    <u-line></u-line>
    <DescriptionsItem
      label="续租时长"
      :labelColon="false"
      style="padding: 10px 0"
    >
      <view class="time-date"
        >{{ queryPriceParam.carUseTime && queryPriceParam.carReturnTime ? diffTimeStr(queryPriceParam.carUseTime, queryPriceParam.carReturnTime) : "-" }}
      </view>
    </DescriptionsItem>
  </Card>
</template>

<script>
import dayjs from "dayjs";
import { diffTimeStr } from "@/utils/index.js";
import DescriptionsItem from "../itemDetail/descriptionsItem.vue";
import Card from "../itemDetail/card.vue";

export default {
  name: "qc-choose",
  data() {
    return {
      endTime: undefined,
    };
  },
  props: {
    queryPriceParam: {
      type: Object,
      default: () => {},
    },
  },
  components: {
    Card,
    DescriptionsItem,
  },
  filters: {
    dateFilter(val) {
      return val ? dayjs(val).format("YYYY-MM-DD HH:mm") : "-";
    },
  },
  methods: {
    diffTimeStr,
    // 选择结束时间
    selectRenewedTime() {
      this.$emit('selectTime')
    },
  },
  mounted() {},
};
</script>

<style lang="scss" scoped>
.time-date {
  text-align: right;
}
.placeholder-text {
  display: flex;
  align-items: center;
  text-align: right;
  justify-content: flex-end;
  span {
    margin-right: 10rpx;
  }
}
</style>
